<template>
  <div class="app-container layout-container">
    <a-breadcrumb>
      <a-breadcrumb-item>系统设置</a-breadcrumb-item>
      <a-breadcrumb-item>透明装模式配置</a-breadcrumb-item>
    </a-breadcrumb>
    <div class="transparent-container" v-spin-loading="{ spinning: isLoading, tip: '加载中...' }">
      <div class="app-container transparent-container-list">
        <div class="transparent__item" v-for="(item, index) in configs" :key="item.portraitId">
          <div class="transparent__item__header">
            <span class="business-name">{{ item.portraitName }}</span>
            <a-switch v-model="item.isEnable" @change="changeTypeEnable($event, item)"></a-switch>
          </div>
          <div class="transparent__item__body" v-if="item.isEnable">
            <div class="body-template">
              <div class="body-template__select">
                <span>设置标准报价模板</span>
                <SelectSearch
                  :defaultSelectId="item.templateIds[0]"
                  :defaultSelectList="item.templateId"
                  placeholder="请选择模板，该模板所有定额项、商品可展示给客户"
                  selectPlaceholder="请选择模板，该模板所有定额项、商品可展示给客户"
                  :requestApi="standardTemplate"
                  :config="searchFormConfig"
                  :index="index"
                  is-first-load
                  @change-select="changeForm"
                />
                <!--                <SelectSearchMultiple-->
                <!--                  selectPlaceholder="请选择模板，该模板所有定额项、商品可展示给客户"-->
                <!--                  placeholder="请选择模板，该模板所有定额项、商品可展示给客户"-->
                <!--                  :defaultSelectId="item.templateIds"-->
                <!--                  :defaultSelectList="item.templateId"-->
                <!--                  :requestApi="standardTemplate"-->
                <!--                  :config="searchFormConfig"-->
                <!--                  :index="index"-->
                <!--                  @change-select="changeForm"-->
                <!--                />-->
              </div>
              <div class="body-template__checkbox">
                <a-checkbox v-model="item.isStandard">
                  <span class="option-label">展示所有定额项目的“工艺标准”</span>
                </a-checkbox>
              </div>
            </div>
            <div class="radio-group">
              <div class="radio-group__item" v-for="radioItem in radios" @click="changeRadio(item, radioItem)">
                <GiSvgIcon :size="16" name="radio-active" v-if="radioItem.value === item.status" />
                <GiSvgIcon :size="16" name="radio-default" v-else />
                <span class="option-label">{{ radioItem.label }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="transparent-footer">
        <a-button type="primary" @click="handelSave">保存</a-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Message } from "@arco-design/web-vue";
import SelectSearch from "./components/selectSearch/index.vue";
import SelectSearchMultiple from "./components/selectSearchMultiple/index.vue";
import { configList, saveConfig, standardTemplate } from "@/apis/transparentPackaging";
import { type configItem } from "@/apis";
import { cloneDeep } from "lodash";

const isLoading = ref(false);
const configs = ref<configItem[]>([]);
const getConfigList = async () => {
  try {
    isLoading.value = true;
    const { data } = await configList();
    configs.value = data?.map(item => {
      return {
        // ...item,
        // templateId: item.templateId?.length || [""],
        // templateIds: item.templateId?.map((item: configItem) => item.templateId) || []
        ...item,
        templateIds: item.templateId?.map((item: configItem) => item.templateId) || []
      };
    });
    isLoading.value = false;
  } catch (err) {
    isLoading.value = false;
    console.log(err);
  }
};

const searchFormConfig = {
  label: "budgetName",
  value: "templateId",
  keyword: "name"
};
const changeForm = (data: any) => {
  const cloneData = cloneDeep(cloneDeep(data.selectObj));
  configs.value[data.index].templateId = [cloneData];
  configs.value[data.index].templateIds = [cloneData.templateId];
  // const { selectArr, index } = data;
  // configs.value[index].templateId = selectArr ?? [];
  // configs.value[index].templateIds = selectArr?.map((item: configItem) => item.templateId) || [];
};

const radios = ref([
  {
    value: 1,
    label: "客户可见以上模板的'所有商品'定额清单明细定价表"
  },
  {
    value: 2,
    label: "客户只可见'自身签订的合同'对应明细清单的定价表"
  }
]);
const changeRadio = (item: any, radioItem: any) => {
  item.status = radioItem.value;
};

const changeTypeEnable = (e: boolean, data: configItem) => {
  if (!e) {
    data.templateId = [];
    data.templateIds = [];
  }
};

/**
 * 校验参数
 */
const checkParams = () => {
  return configs.value.some((item: any) => {
    if (item.isEnable && item.status === 1 && !item.templateId?.length) {
      return true;
    }
  });
};
const handelSave = async () => {
  try {
    if (checkParams()) return Message.error("请设置标准报价模板");
    isLoading.value = true;
    await saveConfig(configs.value);
    Message.success("保存成功");
    isLoading.value = false;
  } catch (err) {
    console.log(err);
    isLoading.value = false;
  }
};

getConfigList();
</script>

<style scoped lang="scss">
@import "transparentPackaging";
</style>
